<!-- @Author ： NWJ
    Watch： 监视数据的变化 
    Vue3 中的 Watch 只能监视以下四种数据
        1.ref 定义的数据
        2.reactive 定义的数据
        3.函数返回值（getter函数）
        4.一个包含上述内容的数组
        Version ： 1.0 -->

<script setup lang="ts" name="Watch">
import { ref, watch } from 'vue';
//Data
let sum = ref(0)
//Function
function changeSum() {
    sum.value += 1
}
//watch watch(谁？ ， 回调函数)
const stopWatch = watch(sum, (newValue, oldValue) => {
    console.log('sum变化了！', newValue, oldValue);
    if (newValue >= 10) {
        stopWatch();
    }
})

</script>


<template>
    <div>
        <h1>1、监视【ref】定义的【基本类型】数据</h1>
        <h2>当前求和为： {{ sum }}</h2>
        <br>
        <input type="button" value="点我加一" @click="changeSum()">
    </div>
</template>


<style scoped></style>
